import React, { useState } from 'react';
import { colors, Img, Input, Inter, V } from '@/components';
import { R } from '@/assets';
import { ScrollView } from 'react-native-gesture-handler';

interface LoginProps {
  onLogin: (name: string, password: string) => void;
  onRegister: () => void;
  onForgotPassword: () => void;
  onOtherLogin: (type: 'wechat' | 'apple' | 'google') => void;
}

export const Login = (props: LoginProps) => {
  const { onLogin, onRegister, onForgotPassword, onOtherLogin } = props;

  const [name, setName] = useState('test1');
  const [password, setPassword] = useState('111111');

  const onDidLogin = () => {
    onLogin && onLogin(name, password);
  };

  const onDidRegister = () => {
    onRegister && onRegister();
  };

  const onDidForgotPassword = () => {
    onForgotPassword && onForgotPassword();
  };

  const onDidOtherLogin = (type: 'wechat' | 'apple' | 'google') => {
    onOtherLogin && onOtherLogin(type);
  };

  const HeaderView = () => {
    return (
      <V f mt="100" h="100">
        <Img wh={64} src={R.public.logo()} />
        <V mt="48">
          <Inter fs="32">Login</Inter>
        </V>
      </V>
    );
  };

  const InputView = (info: {
    label: string;
    placeholder: string;
    onChange: (text: string) => void;
  }) => {
    return (
      <V h="64" bcb="#000" bwb="0.5" jc="c">
        <Input
          placeholder={info.placeholder}
          placeholderTextColor={colors.text.secondary}
          fs="14"
          c={colors.text.primary}
          onChangeText={info.onChange}
        />
      </V>
    );
  };
  const FormView = () => {
    return (
      <V f mt="100">
        <InputView
          label="test1"
          placeholder="输入手机号/用户名/邮箱"
          onChange={setName}
        />
        <InputView
          label="111111"
          placeholder="输入密码"
          onChange={setPassword}
        />
        <V f jc="fe" mt="16" ai="fe" onPress={onDidForgotPassword}>
          <Inter fs="14" c={colors.text.secondary}>
            忘记密码？
          </Inter>
        </V>
        <V mt="48">
          <V f jc="c" ai="c" h="48" bg="red" br="12" onPress={onDidLogin}>
            <Inter fs="14" c={colors.text.inverse}>
              登录
            </Inter>
          </V>
          <V f jc="c" ai="c" h="48" mt="16" br="12" onPress={onDidRegister}>
            <Inter fs="14" c={colors.text.primary}>
              注册
            </Inter>
          </V>
        </V>
      </V>
    );
  };
  const ButtomView = () => {
    return (
      <V f row jc="sb" ai="c" h="100" w="100%" pl="20" pr="20">
        <V onPress={() => onDidOtherLogin('wechat')}>
          <Img wh={48} src={R.public.logo()} />
        </V>
        <V onPress={() => onDidOtherLogin('apple')}>
          <Img wh={48} src={R.public.logo()} />
        </V>
        <V onPress={() => onDidOtherLogin('google')}>
          <Img wh={48} src={R.public.logo()} />
        </V>
      </V>
    );
  };

  return (
    <ScrollView
      keyboardShouldPersistTaps="handled"
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ flexGrow: 1 }}
    >
      <V p="20">
        <HeaderView />
        <FormView />
        <ButtomView />
      </V>
    </ScrollView>
  );
};
